import React, { useState, useEffect, useRef } from 'react';
import ATable from '@apulis/table';
import type { ATableColumn, SearchToolBarProps } from '@apulis/table';
import type { ActionType } from '@apulis/table/lib/typing';
import { Button, Card, message, Modal, Popover } from 'antd';
import { Link, useIntl } from 'umi';
import { groupListAPI, delEdgeNode, getCode } from './service';
import { edgeRequest } from '@/utils/request';
import trans from '@/utils/translate';
import { ExclamationCircleOutlined, InfoCircleFilled } from '@ant-design/icons';
import { getStatus } from './status';
import format from '@/utils/format';
import SyntaxCopy from '@/components/InfoShow/SyntaxCopy';

interface TableItemType {
  status: string;
  id: string;
  name: string;
};

const List: React.FC = () => {
  const { formatMessage: f } = useIntl();
  const tableRef = useRef<ActionType>();
  const handleDelete = (id: string) => {
    Modal.confirm({
      centered: true,
      closable: true,
      icon: <ExclamationCircleOutlined />,
      maskClosable: true,
      okType: 'danger',
      okText: '确认',
      cancelText: '取消',
      width: '30%',
      title: <div style={{ fontWeight: 'bold' }}>确定要进行删除操作吗？</div>,
      content: <div>删除操作无法撤销，确认删除吗？</div>,
      onOk: async () => {
        const res = await delEdgeNode(id);
        if (res.code === 0) {
          message.success('删除成功');
          tableRef.current?.reload();
        }
      },
      cancelButtonProps: {},
      onCancel: () => {},
    });
  }
  const handleOffline = () => {
    getCode().then(res => {
      if (res && res.code === 0) {
        const code = res.data.data;
        Modal.info({
          centered: true,
          closable: true,
          icon: <ExclamationCircleOutlined style={{color: 'red'}}/>,
          maskClosable: true,
          width: '50%',
          title: (
          <div style={{ fontWeight: 'bold' }}>
            {f({ id: 'nodeManagement.edgeNode.offEdgeNode.title' })}
          </div>
          ),
          content: <div>
            <p>{f({ id: 'nodeManagement.edgeNode.offEdgeNode.stepOne' })}</p>
            <p>{f({ id: 'nodeManagement.edgeNode.offEdgeNode.stepTwo' })}</p>
            <p>{f({ id: 'nodeManagement.edgeNode.offEdgeNode.stepThree' })}</p>
            <SyntaxCopy code={code}></SyntaxCopy>
          </div>,
          onCancel: () => {},
        });
      }
    })
  }

  const columns: ATableColumn<TableItemType>[] = [
    {
      title: trans('nodeManagement.edgeNode.nodeGroupName'),
      dataIndex: 'name',
      render: (text, record) => (
        <Link to={`/node-management/edge-node/group-detail/${record.id}`}>{text}</Link>
      )
    },
    {
      title: trans('nodeManagement.edgeNode.nodeType'),
      dataIndex: 'nodeType',
    },
    {
      title: trans('nodeManagement.edgeNode.groupStatus'),
      dataIndex: 'onlineRatio',
      align: 'center',
    },
    {
      title: trans('nodeManagement.edgeNode.creator'),
      dataIndex: 'userName',
    },
    {
      title: trans('nodeManagement.edgeNode.createdAt'),
      dataIndex: 'createdAt',
      sortable: true,
      render: (text) => format(text),
    },
    {
      title: trans('nodeManagement.edgeNode.operation'),
      render: (text, record) => record.status === 'online' ?
        <a onClick={() => handleOffline()} style={{ marginRight: 8, color: 'blue' }}>
          {trans('nodeManagement.edgeNode.Offline')}
        </a> :
        <a onClick={() => handleDelete(record.id)} style={{ marginRight: 8, color: 'red' }}>
          {trans('common.delete')}
        </a>
    },
  ];


  return (
    <Card>
      <ATable
        actionRef={tableRef}
        request={edgeRequest}
        dataSourceAPIPath={groupListAPI}
        columns={columns}
        rowKey='id'
        leftToolBar={(
          <Link to='/node-management/edge-node/add-node-group'>
            <Button type='primary'>{trans('menu.nodeManagement.addEdgeGroup')}</Button>
          </Link>
        )}
      ></ATable>
    </Card>
  );
}

export default List;
